<template>
  <div class="project-list">
    <div class="project-msg flex">
      <div class="project-box">
        <a :href="item.content.source_link" target="_blank" class="project-title">{{item.content.title}}</a>
      </div>
      <a :href="item.content.source_link" target="_blank" class="project-button">查看项目</a>
    </div>
    <p class="company-name">{{item.content.summary}}</p>
    <div class="project-foot">
      <span class="project-time">{{item.content.date | time}}</span>
      <span class="vertical-bar" v-if="item.content.source"></span>
      <span class="project-source" v-if="item.content.source">{{item.content.source}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'search-project',
    props: ['item']
  }
</script>

<style lang="scss">
  .project-list {
    width: 648px;
    height: 100%;
    padding: 20px 18px;
    margin: 10px auto;
    .project-msg {
      justify-content: space-between;
      align-items: center;
      flex-flow: wrap;
      .project-box {
        display: flex;
        position: relative;
        max-width: 510px;
        .project-title {
          margin: 6px;
          font-weight: 400;
          font-size: 18px;
          line-height: 24px;
          max-height: 48px;
          color: #33383e;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          cursor: pointer;
          &:hover {
            color: #00ba91;
          }
          &:after{
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-bottom: 3px solid #333;
            border-right: 3px solid #333;
            position: absolute;
            bottom: 0;
            right: -3px;
          }
          &:before{
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-top: 3px solid #333;
            border-left: 3px solid #333;
            position: absolute;
            top: 0;
            left: -3px;
          }
        }
      }
      .project-button {
        cursor:pointer;
        width: 82px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 0 12px;
        border-radius: 12px;
        color: #1b1d21;
        border: 1px solid #1b1d21;
        &:hover {
          color: #00ba91;
          border-color: #00ba91;
        }
      }
    }
    .company-name {
      font-size: 14px;
      line-height: 1.5;
      max-height: 3em;
      opacity: 1;
      word-break: break-all;
      letter-spacing: 0.2px;
      color: #878787;
      overflow: hidden;
      transition: all ease-in-out .5s;
      margin-top: 16px;
    }
    .project-foot {
      display: flex;
      margin-top: 20px;
      .project-time {
        font-size: 12px;
        color: #aaa;
      }
      .vertical-bar {
        width: 1px;
        height: 13px;
        background: #aaaaaa;
        margin: 0 10px;
      }
      .project-source {
        font-size: 12px;
        color: #aaa;
      }
    }
  }
</style>
